<template>
  <div class="result-wrapper">
    <div class="song" v-for="(item, index) in list" :key="index" @dblclick="goComments(item.id)">
      <div class="name">
        <span class="iconfont icon-play" @click="goPlayer(item.id)"></span>
        {{item.name}}
        <span
          class="iconfont icon-editmedia"
          v-if="item.mvid !=0"
          @click="goMv(item.mvid)"
        ></span>
      </div>
      <div class="singer">{{item.artists | filterArr}}</div>
      <div class="album">《{{item.album.name}}》</div>
      <div class="time">{{getTime(item.duration)}}</div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import moment from "moment";
export default {
  // 过滤器的使用 重点
  //   1、 定义， 放到filters：{
  // 方法名（）{
  // return 值
  // }

  data() {
    return {
      list: []
    };
  },
  // 侦听器 ： 相当于change事件
  watch: {
    "$route.query.q"() {
      //   newVal:改变后的值
      this.getData();
    }
  },
  filters: {
    filterArr(arr) {
      let _arr = arr.map(item => {
        return item.name;
      });
      return _arr.join("/");
    }
  },
  created() {
    this.getData();
  },
  methods: {
    // 获取时间  对时间进行处理
    getTime(time) {
      return moment(time).format("mm:ss");
    },
    //  获取相应的数据
    getData() {
      let _q = this.$route.query.q;
      axios({
        url: "http://183.237.67.218:3000/search?keywords=" + _q
      }).then(res => {
        // window.console.log(res);
        this.list = res.data.result.songs;
      });
    },
    // 获取mv数据和id
    goMv(mvid) {
      this.$router.push({
        path: "/mv",
        query: {
          mvid: mvid
        }
      });
    },
    // 跳转至播放歌曲页面
    goPlayer(id) {
      this.$router.push("/player?id=" + id);
    },
    // 跳转至评论
    goComments(id) {
      this.$router.push("/comments?id=" + id);
    }
  }
};
</script>

<style>
</style>